<template>
    <div class="div">
        <Category title="美食">
          <img slot="center" src="./assets/logo.png"/>
          <a slot="footer" href="#">更多美食</a>
        </Category>
         <Category title="游戏" >
            <ul slot="center">
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
             <!-- <a slot="footer" href="#">单机游戏</a>
              <a slot="footer" href="#">网络游戏</a> -->
            <template slot="footer">
                 <a slot="footer" href="#">单机游戏</a>
              <a slot="footer" href="#">网络游戏</a>
            </template>
         </Category>
        <Category title="电影">
           <ul slot="center">
            <li v-for="(f,index) in films" :key="index">{{f}}</li>
            </ul>
            <!--template新写法 v-slot:footer  -->
            <template v-slot:footer>
                 <a slot="footer" href="#">单机游戏</a>
              <a slot="footer" href="#">网络游戏</a>
            </template>
        </Category>
    </div>
   
</template>

<script>
import Category from './components/Category'
    export default {  //es6暴露方法 export default 默认方法常用
        name:'App',  //告诉vue开发者工具当前组件名字
        components:{
           Category
        },
        data(){
            return{
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','英雄联盟','地下城与勇士'],
                films:['《狙击手》','《水门桥》','《我和我的祖国》','《你好，李焕英》']
            }
        }

    }
</script>

<style>
   .div{
       text-align: center;
       display: flex;
       justify-content: space-around;
   }
</style>